<script setup lang="ts">
import { RouterView } from 'vue-router'
import { ref } from 'vue'
import { useDark, useToggle } from '@vueuse/core'
import {
  HomeFilled,
  TrendCharts,
  User,
  InfoFilled,
  Sunny,
  Moon,
  UserFilled
} from '@element-plus/icons-vue'

const isDark = useDark({
  selector: 'html',
  attribute: 'class',
  valueDark: 'dark',
  valueLight: ''
})
const toggleDark = useToggle(isDark)

const activeIndex = ref('1')

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<template>
  <el-container class="layout-container">
    <el-header>
      <el-menu
        :default-active="$route.path"
        class="el-menu-demo"
        mode="horizontal"
        router
        @select="handleSelect"
      >
        <el-menu-item index="/">
          <template #title>
            <el-icon><HomeFilled /></el-icon>
            <span>首页</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/dashboard">
          <template #title>
            <el-icon><TrendCharts /></el-icon>
            <span>仪表盘</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/users">
          <template #title>
            <el-icon><User /></el-icon>
            <span>用户管理</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/about">
          <template #title>
            <el-icon><InfoFilled /></el-icon>
            <span>关于</span>
          </template>
        </el-menu-item>
        <el-menu-item index="/login">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>登录</span>
          </template>
        </el-menu-item>
        <div class="flex-grow" />
        <el-menu-item @click="toggleDark()">
          <el-icon>
            <Sunny v-if="isDark" />
            <Moon v-else />
          </el-icon>
        </el-menu-item>
      </el-menu>
    </el-header>

    <el-main>
      <RouterView />
    </el-main>

    <el-footer>
      <div class="footer-content">
        <p>&copy; 2024 Vue3 + Element Plus 示例项目</p>
      </div>
    </el-footer>
  </el-container>
</template>

<style scoped>
.layout-container {
  min-height: 100vh;
}

.flex-grow {
  flex-grow: 1;
}

.el-header {
  padding: 0;
}

.footer-content {
  text-align: center;
  padding: 20px 0;
  color: #666;
}
</style>
